<!-- 项目进度 -->
<template>

  <div>
    <el-row :gutter="20">
      <el-col v-bind="styleResponsive ? { lg: 4, md: 8, sm:8,xs:8} : { span: 4 }">
        <div style="display: flex;justify-content: space-between;">
          <div class="grid-content bg-yellow"
               style="color: #fff;">
            <img class="imageIcon"
                 src="../../../../assets/PC收银/组合 1013.png"
                 alt="">
            <div class="m-top15 fontSize16 ">今日充值</div>
            <div class="m-top15 fontSize16 "><vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                statisticsData?.todayRechargeAmount
                  ? statisticsData?.todayRechargeAmount
                  : '0'
              " />元</div>
          </div>

        </div>
      </el-col>
      <el-col v-bind="styleResponsive ?  { lg: 4, md: 8, sm:8,xs:8} : { span: 4 }">
        <div style="display: flex;justify-content: space-between;">
          <div class="grid-content bg-purple"
               style="color: #fff;">
            <img class="imageIcon"
                 src="../../../../assets/PC收银/组合 1014.png"
                 alt="">
            <div class="m-top15 fontSize16 ">本月充值</div>
            <div class="m-top15 fontSize16 "><vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                statisticsData?.monthRechargeAmount
                  ? statisticsData?.monthRechargeAmount
                  : '0'
              " />元</div>
          </div>

        </div>
      </el-col>
      <el-col v-bind="styleResponsive ?  { lg: 4, md: 8, sm:8,xs:8} : { span: 4 }">
        <div style="display: flex;justify-content: space-between;">
          <div class="grid-content bg-blue"
               style="color: #fff;">
            <img class="imageIcon"
                 src="../../../../assets/PC收银/组合 1015.png"
                 alt="">
            <div class="m-top15 fontSize16 ">今日用户消费</div>
            <div class="m-top15 fontSize16 "><vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                statisticsData?.todayConsumptionAmount
                  ? statisticsData?.todayConsumptionAmount
                  : '0'
              " />元</div>
          </div>

        </div>
      </el-col>
      <el-col v-bind="styleResponsive ?  { lg: 4, md: 8, sm:8,xs:8} : { span: 4 }">
        <div style="display: flex;justify-content: space-between;">
          <div class="grid-content bg-green"
               style="color: #fff;">
            <img class="imageIcon"
                 src="../../../../assets/PC收银/组合 1016.png"
                 alt="">
            <div class="m-top15 fontSize16 ">本月用户消费</div>
            <div class="m-top15 fontSize16 "><vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                statisticsData?.monthConsumptionAmount
                  ? statisticsData?.monthConsumptionAmount
                  : '0'
              " />元</div>
          </div>

        </div>
      </el-col>
      <el-col v-bind="styleResponsive ?  { lg: 4, md: 8, sm:8,xs:8} : { span: 4 }">

        <div style="display: flex;justify-content: space-between;">
          <div class="grid-content bg-deepPurple"
               style="color: #fff;">
            <img class="imageIcon"
                 src="../../../../assets/PC收银/组合 1017.png"
                 alt="">
            <div class="m-top15 fontSize16 ">商城订单</div>
            <div class="m-top15 fontSize16 "><vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                statisticsData?.todayOrderCount
                  ? statisticsData?.todayOrderCount
                  : '0'
              " /></div>
          </div>

        </div>

      </el-col>
      <el-col v-bind="styleResponsive ?  { lg: 4, md: 8, sm:8,xs:8} : { span: 4 }">
        <div style="display: flex;justify-content: space-between;">
          <div class="grid-content bg-red"
               style="color: #fff;">
            <img class="imageIcon"
                 src="../../../../assets/PC收银/组合 1018.png"
                 alt="">
            <div class="m-top15 fontSize16 ">本月订单</div>
            <div class="m-top15 fontSize16 "> <vue-count-up class="Num"
                            :options="countUpOptions"
                            :end-val="
                statisticsData?.monthOrderCount
                  ? statisticsData?.monthOrderCount
                  : '0'
              " /></div>
          </div>

        </div>``
      </el-col>

    </el-row>
  </div>

</template>

<script>
import { orderStatistics } from '@/api/headStatistics/index'
// import moment from 'moment';
import VueCountUp from 'vue-countup-v2';
export default {
  name: 'reflectList',
  components: {
    VueCountUp
  },
  data () {

    return {
      countUpOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        decimalPlaces: 2,
        prefix: '',
        suffix: '',

      },
      role_type: '',
      //  技能评分
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      value: 4,
      // 表格列配置

      current: null,
      // 表格选中数据
      selection: [],
      drawerReflectBoolen: false,
      statisticsData: null

    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    // 时间格式化
    // formattedDate () {
    //   return (params) => {
    //     const currentDate = moment(params);
    //     const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
    //     return formattedDate;
    //   };
    // },
    // 服务状态

    // 实名认证

  },
  mounted () {

    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    async init () {
      // orderStatistics
      const res = await orderStatistics()
      console.log(res)
      if (res.code == 0) {
        this.statisticsData = res.data
        console.log(this.todayRechargeAmount)
      }
    },
    // 点击查看详情弹出详情抽屉
    viewDetail (row) {
      console.log(row);

      if (row) {
        this.current = row;
        // 用户余额管理
        this.drawerReflectBoolen = !this.drawerReflectBoolen;
      }
    },


    /* 刷新表格 */
    reload (where) {
      this.$refs.table.reload({ page: 1, where: where, types: 1 });
    },

    /* 删除 */
    remove (row) {
      console.log(row)

    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      console.log(this.selection);
      this.$confirm('确定要删除选中的信息吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          //   const loading = this.$loading({ lock: true });
          //   console.log(this.selection.map((d) => d.id));
          //   pointsDetailsBatch(this.selection.map((d) => d.id))
          //     .then((msg) => {
          //       loading.close();
          //       this.$message.success(msg);
          //       this.reload();
          //     })
          //     .catch((e) => {
          //       loading.close();
          //       this.$message.error(e.message);
          //     });
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="less" scoped>
/* 当屏幕宽度小于等于600px时应用的样式 */
// @media screen and (max-width: 600px) {
//   .bg-yellow {
//     .imageIcon {
//       width: 24px !important;
//       height: 24px !important;
//     }
//     height: 40.31px !important;
//   }
// }

// /* 当屏幕宽度大于600px且小于等于1200px时应用的样式 */
// @media screen and (min-width: 800px) and (max-width: 1300px) {
//   .bg-yellow {
//     height: 120.31px !important;
//     .imageIcon {
//       width: 24px !important;
//       height: 24px !important;
//     }
//   }
// }
// @media screen and (min-width: 601px) and (max-width: 800px) {
//   .bg-yellow {
//     height: 100.31px !important;
//     .imageIcon {
//       width: 24px !important;
//       height: 24px !important;
//     }
//   }
// }
// /* 当屏幕宽度大于1200px时应用的样式 */
// @media screen and (min-width: 1301px) {
//   .bg-yellow {
//     height: 198.31px !important;
//     .imageIcon {
//       width: 48px;
//       height: 48px;
//     }
//   }
// }
.bg-green {
  background-color: #48e0b1;
  //   background-image: url('../../../../assets/PC收银/组合 1024.png');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   background-color: #f00;
  .imageIcon {
    width: 40px;
    height: 40px;
  }
  border-radius: 10px;
  box-shadow: 2px 8px 13px 0px rgba(202, 31, 37, 0.34);
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 262.57px;
  min-height: 90px;
  height: 178.31px;
}
.bg-red {
  background-color: #f92a2a;
  //   background-image: url('../../../../assets/PC收银/组合 1024.png');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   background-color: #f00;
  .imageIcon {
    width: 40px;
    height: 40px;
  }
  border-radius: 10px;
  box-shadow: 2px 8px 13px 0px rgba(202, 31, 37, 0.34);
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 262.57px;
  min-height: 90px;
  height: 178.31px;
}
.bg-deepPurple {
  background-color: #a935f8;

  //   background-image: url('../../../../assets/PC收银/组合 1024.png');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   background-color: #f00;
  .imageIcon {
    width: 40px;
    height: 40px;
  }
  border-radius: 10px;
  box-shadow: 2px 8px 13px 0px rgba(163, 31, 202, 0.34);
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 262.57px;
  min-height: 90px;
  height: 178.31px;
}
.bg-blue {
  background-color: #34c1f8;
  //   background-image: url('../../../../assets/PC收银/组合 1024.png');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   background-color: #f00;
  .imageIcon {
    width: 40px;
    height: 40px;
  }
  border-radius: 10px;
  box-shadow: 2px 8px 13px 0px rgba(41, 158, 205, 0.34);
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 262.57px;
  min-height: 90px;
  height: 178.31px;
}
.bg-purple {
  background-color: #5f7af8;
  //   background-image: url('../../../../assets/PC收银/组合 1024.png');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   background-color: #f00;
  .imageIcon {
    width: 40px;
    height: 40px;
  }
  border-radius: 10px;
  box-shadow: 2px 8px 13px 0px rgba(34, 64, 195, 0.34);
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 262.57px;
  min-height: 90px;
  height: 178.31px;
}
.bg-yellow {
  background-color: #f9903d;
  //   background-image: url('../../../../assets/PC收银/组合 1024.png');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   background-color: #f00;
  .imageIcon {
    width: 40px;
    height: 40px;
  }
  border-radius: 10px;
  box-shadow: 2px 8px 13px 0px rgba(248, 149, 69, 0.34);
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 262.57px;

  height: 178.31px;
}
.project-table :deep(.el-progress__text) {
  font-size: 12px !important;
}

.realNameStyle {
  .avaterName {
    width: 74px;
    height: 74px;
    vertical-align: middle;
    margin-right: 15px;
    border-radius: 10px;
  }
  .price {
    color: #f00;
    font-family: Inter;
    font-size: 16px;
  }
  .technicianName {
    color: #999;
    font-family: Inter;
    font-size: 12px;
  }
}
.site {
  color: #666;
  font-family: Inter;
  font-size: 14px;
}
.creatData {
  color: #999;
  font-family: Inter;
  font-size: 14px;
}
</style>
